{% extends "layout.html" %}

{% block navright %}
<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" title="Examples" aria-expanded="false">
    <span>Examples</span>
    <span class="caret"></span>
    <ul id="exampledropdown" class="dropdown-menu">
      <li>
        <a href="/?code=%27Hello%2C+World%21%27" data-toggle="tooltip">Hello World</a></li>
      <li>
        <a href="/?code=%60Z%270XODlY.XxT">Clock</a>
      </li>
      <li>
        <a href="/?code=0%3A.01%3A4YP%2atY%2C%26XG">Sine Function</a>
      </li>
      <li>
        <a href="/?code=3YG&inputs=%27https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1041686882915155968%2Fqw90wxxo_400x400.jpg%27">Image</a>
      </li>
      <li>
        <a href="/?code=%25+Create+values+of+t+from+0+-+1+seconds+at+44100+Hz+%28in+radians%29%0A0+l+44100+%2F+1+3%24%3A+2YP+%2a+%2a+XJx%0A%0A%27C-Major%3A%27D%0A%5B261.626%3B+329.628%3B+391.995%5D+J%2aX%2C+s+T+T%26Y%23%0A%0A%27F-Major%3A%27D%0A%5B261.626%3B+349.228%3B+440.000%5D+J%2aX%2C+s+T+T%26Y%23%0A%0A%27G-Major%3A%27D%0A%5B246.942%3B+293.665%3B+391.995%5D+J%2aX%2C+s+T+T%26Y%23">Sound Clips</a>
      </li>
      <li>
        <a href="/?code=2%24rEk%60tZcXxDt3Y6Z%2ByyHIhm%2abbI%3D<%2BT&inputs=20%0A50" data-toggle="tooltip">
            Game of Life (by Luis Mendo)
        </a>
      </li>
    </ul>
  </a>
</li>
<li id="docmenutoggle" data-toggle="tooltip" title="Toggle Documentation">
  <a id="doctoggle" href="#">Documentation</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" title="Change Version" aria-expanded="false">
  <span id="version" data-version="{{ version }}">
      v{{ version }}
      {% if version == versions[0].tag %}
      (latest)
      {% endif %}
    </span>
    <span class="caret"></span>
  </a>
  <ul id="versiondrop" class="dropdown-menu">
    {% for item in versions %}
    <li><a class="version" href="#" data-version="{{ item.tag }}"
        data-toggle="tooltip" title="{{ item.date }}">v{{ item.tag }}</a></li>
    {% endfor %}
  </ul>
  </li>
{% endblock %}

{% block content %}
    <div class="modal fade" id="explainmodal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="modaltitle">Explanation</h4>
          </div>
          <div class="modal-body explain">
            <div id="modal-explain" class="code"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="pastemodal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title">Paste Input Argument</h4>
          </div>
          <div class="modal-body explain">
            <textarea id="paste_input_field" class="code" placeholder="Paste Input Here"></textarea>
            <div class="modal-footer">
              <div style="float:left;">
                <label class="radio-inline"><input id="array_input" type="radio" name="format" value="array" checked/>Python Array</label>
                <label class="radio-inline"><input id="string_input" type="radio" name="format" value="string"/>Multi-line String</label>
              </div>
              <button type="button" id="paste_apply" class="btn btn-secondary">Apply</button>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Creates the bootstrap modal where the image will appear -->
    <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Image Preview</h4>
          </div>
          <div class="modal-body">
            <img src="" id="imagepreview">
            <div class="imagedetaildiv">
              <div id="share" class="flip">
                <span class="glyphicon glyphicon-share"></span>
                Share
              </div>
              <div id="sharelink" class="flip">
                <img src="static/images/imgur.png" class="imgur"/>
                <input id="imgurlink" value="Waiting..." style="height:20px;" size=40 disabled>
              </div>
              <span class="imagedetails">
                Actual Size: <span id="dimensions"></span> pixels
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row has-inner-drawer inner-container">
      <div id="left_div" class="col-lg-12 col-md-12 col-sm-12 transition-width">
        <form id="codeform" action="#" method="POST">
          <div class="form-group">
            <label for="code">Source Code</label>
            <span id="explain" data-toggle="tooltip" title="Show Explanation" class="glyphicon glyphicon-question-sign"></span>
            <span class="annotation" id="charcount">
              ({{ code|length }} character{% if code|length != 1 %}s{% endif %})
            </span>
            <textarea id="code" rows=1 class="code form-control" name="code">{% if code %}{{ code }}{% endif %}</textarea>
          </div>

          <div class="form-group">
            <label for="inputs">Input Arguments</label>
            <div style="position: relative;">
              <i id="paste_input" data-toggle="tooltip" title="Paste Input" class="fa fa-clipboard pull-right"></i>
              <textarea id="inputs" rows=1 class="code form-control" name="inputs">{% if inputs %}{{ inputs }}{% endif %}</textarea>
            </div>
              <br>
            <button id="run" class="btn btn-secondary disabled">Connecting</button>
            <button id="save" class="btn btn-secondary">Save</button>
          </div>

          <input class="form-control" type="hidden" id="debug" name="debug" value="0">
        </form>

        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#outputtab" id="outputconsoletab">Output</a></li>
          <li><a data-toggle="tab" href="#errortab" id="errorconsoletab">Error Console</a></li>
        </ul>

        <div class="tab-content" style="height:auto;">
          <div id="outputtab" class="tab-pane active">
            <div class="code output" id="output" wrap="off"></div>
          </div>

          <div id="errortab" class="tab-pane">
            <div id="errors" class="error output"></div>
          </div>
        </div>
      </div>

      <div id="right_div" class="drawer drawer-right drawer-inside fold dw-lg-6 dw-md-6 dw-s-6 dw-xs-12 documentation">
        <table class="table-striped table" id="documentation">
          <thead>
            <tr>
              <th>Stmt.</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
  </div>

{% endblock %}
